<template>
	<transition appear name="columnT">
		<div class="column">
			<div class="box" style="margin-top:135px" v-if="currentPage == 1">
				<div v-if="thisColumn.BilibiliObj" class="fmIMG" v-bind:style="{ 'background-image': 'url(' + thisColumn.BilibiliObj.pic+'?imageView2/1/w/195/h/122' + ')' }"></div>
				<div v-html="thisColumn.content"></div>
				<div style="clear: both;"></div>
				</div>

			<div v-if="articleList.length>0" class="box" style="margin-top:62px;margin-bottom:100px;">
				<ul>
					<li v-for="(article, index) in articleList" v-bind:key="'article' + index">
						<router-link :to="'/article/' + columnId + '/' + article.id">
							<div v-if="article.imgURL" class="fmIMG" v-bind:style="{ 'background-image': 'url(' + article.imgURL+'?imageView2/1/w/195/h/122' + ')' }"></div>
							<span class="listTime">{{ article.publishTime | dateformat('YYYY-MM-DD HH:mm:ss') }}</span>
							<span class="listTitle">{{ article.title }}</span>
							<p class="listP">{{ article.abstract }}</p>
							<div class="clearFloat"></div>
						</router-link>
					</li>
				</ul>
				<el-pagination
					@current-change="handleCurrentChange"
					:current-page.sync="currentPage"
					:page-size="pageSize"
					:total="total"
					background
					layout="prev, pager, next"
					style="text-align: center;"
				></el-pagination>
			</div>
		</div>
	</transition>
</template>

<script>
export default {
	name: 'column',
	components: {
		// HelloWorld 
	},
	data() {
		return {
			columnId: '',
			thisColumn: {},
			articleList: [],
			total: 0,
			pageSize: 10,
			pageCount: 0,
			currentPage: 1
		};
	},
	created() {
		this.refresh();
	},
	watch: {
		// 如果路由有变化，会再次执行该方法
		$route: 'refresh'
	},
	methods: {
		refresh() {
			this.columnId = this.$route.params.columnId;
			console.log(this.$route.query)
			console.log(this.$route.params)
			if(this.$route.query.page){
				this.currentPage=Number(this.$route.query.page)
			}
			this.getListCount();
			this.getColumn();
		},
		getListCount() {
			this.requestMy({
				url: '/articles/count',
				method: 'get',
				params: {
					where: {
						state: 0,
						columnId: this.columnId
					}
				}
			})
				.then(response => {
					// console.log(response);
					this.total = response.count;
					this.pageCount = Math.ceil(this.total / this.pageSize);
					this.getArticleList(this.currentPage, this.pageSize);
				})
				.catch(error => {
					console.log(error);
				});
		},
		getArticleList(currentPage, pageSize) {
			this.requestMy({
				url: '/articles',
				method: 'get',
				params: {
					filter: {
						where: {
							state: 0,
							columnId: this.columnId
						},
						fields: {
							content: false,
							id: true,
							title: true,
							publishTime: true,
							imgURL: true,
							abstract: true
						},
						order: 'publishTime DESC',
						limit: pageSize,
						skip: (currentPage - 1) * pageSize
					}
				}
			})
				.then(response => {
					// console.log(response);
					this.articleList = response;
				})
				.catch(error => {
					console.log(error);
				});
		},
		getColumn() {
			this.requestMy({
				url: '/columns/' + this.columnId,
				method: 'get',
				params: {}
			})
				.then(response => {
					// console.log(response);
					this.thisColumn = response;
				})
				.catch(error => {
					console.log(error);
				});
		},
		handleCurrentChange(val) {
			this.$router.push({path: this.$route.path, query: {page: val}})
			this.currentPage = val;
			this.getArticleList(this.currentPage, this.pageSize);
			console.log(`当前页: ${val}`);
		}
	}
};
</script>

<style>
.listTitle {
	font-size: 20px;
	color: #3c3e42;
}

.listP {
	font-size: 16px;
	color: #7b7b7b;
}

.listTime {
	float: right;
	font-size: 10px;
	color: #a7a7a7;
}

.fmIMG {
	width: 195px;
	height: 122px;
	box-shadow: 0px 0px 10px 0px #d1d1d1;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: 160px 100px; */
	float: left;
	margin-right: 25px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
	background-color: #606265;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
	background-color: white;
}
.columnT-enter-active,
.columnT-leave-active {
	transition: all  1s;
}
.columnT-enter, .columnT-leave-to /* .fade-leave-active below version 2.1.8 */ {
	transform: translateY(1300px);
}
</style>
